import React, { Component } from 'react'
// 编写css-in-js 步骤
// 使用前, 需要安装vscode 插件 vscode-styled-components 方便在js中写css
// 01: 安装 第三方的库 styled-components
// 02: 语法: 可以实现样式的继承
// 03: 语法: 可以实现传参 有点类似于父传子
import styled from 'styled-components';

const Title = styled.div`
   background-color: green;
   font-size: 30px;
`
const Title1 = styled(Title)`
   color:red;
   font-weight:800;   
`
const Title2 = styled(Title1)`
   border:1px solid blue ;
`
const Mystyle = styled.p`
    color:deeppink;
    font-weight:bold;
    /* props 为接收的参数对象 */
    font-size:${(props) => props.font || '20px'} ;
`
/* console.log('Title', Title); */
export default class Father extends Component {
    render() {
        return (
            <>
                {/* 基本用法 */}
                <div><Title>我是样式1</Title> </div>
                {/* 样式的继承 */}
                <div><Title1>我是样式2</Title1></div>
                {/* 样式的继承 */}
                <Title2>我是样式3</Title2>
                {/* 样式传参 */}
                <Mystyle font='50px'>
                    <span>我是样式4</span>
                </Mystyle>
            </>
        )
    }
}


